<template>
  <div>
    <CustomTitle title="仪器状态" />
    <div class="w-[520px] h-[311px] bg-[#1B1B1B] rounded-[10px] mt-[30px] flex items-center justify-around">
      <img :src="imgPng" class="w-[229px] h-[169px]" />
      <div>
        <div class="flex-shrink">
          <div v-if="status === '采集中'" class="flex-shrink max-w-[100px] flex items-center justify-center h-[27px] rounded-[10px] bg-[#53DCFF] text-white">
            <span>{{ status }}</span>
          </div>
          <div
            v-else-if="status === '真空打开'"
            class="flex-shrink max-w-[100px] flex items-center justify-center h-[27px] rounded-[10px] bg-[#FF9F00] text-white"
          >
            <span>{{ status }}</span>
          </div>
          <div
            v-else-if="status === '真空关闭'"
            class="flex-shrink max-w-[100px] flex items-center justify-center h-[27px] rounded-[10px] bg-[#FF9F00] text-white"
          >
            <span>{{ status }}</span>
          </div>
          <div v-else class="flex-shrink max-w-[100px] flex items-center justify-center h-[27px] rounded-[10px] bg-[#5AD8A6] text-white">
            <span>{{ status }}</span>
          </div>
        </div>

        <div class="w-[172px]">
          <div class="text-[13px] w-full flex justify-between mt-[10px]">
            <span class="text-label-normal">IF/BK 真空度</span>
            <span class="text-[#FF9F00]">{{ Number(datas['IF/BK 真空度'].value).toFixed(2) || '' }}{{ datas['IF/BK 真空度'].unit || '' }}</span>
          </div>
          <div class="text-[13px] w-full flex justify-between mt-[10px]">
            <span class="text-label-normal">四极杆真空度 </span>
            <span class="text-[#FF9F00]">{{ Number(datas['四极杆真空度'].value).toFixed(2) || '' }}{{ datas['四极杆真空度'].unit || '' }}</span>
          </div>
          <div class="text-[13px] w-full flex justify-between mt-[10px]">
            <span class="text-label-normal">内部温度 </span>
            <span class="text-[#FF9F00]">{{ Number(datas['内部温度'].value).toFixed(2) || '' }}{{ datas['内部温度'].unit || '' }}</span>
          </div>
          <div class="text-[13px] w-full flex justify-between mt-[10px]">
            <span class="text-label-normal">反馈功率 </span>
            <span class="text-[#FF9F00]"> {{ Number(datas['反馈功率'].value).toFixed(2) || '' }}{{ datas['反馈功率'].unit || '' }}</span>
          </div>
          <div class="text-[13px] w-full flex justify-between mt-[10px]">
            <span class="text-label-normal">雾化气压力 (BP) </span>
            <span class="text-[#FF9F00]">{{ Number(datas['雾化气压力 (BP)'].value).toFixed(2) || 0 }}{{ datas['雾化气压力 (BP)'].unit || '' }}</span>
          </div>
          <div class="text-[13px] w-full flex justify-between mt-[10px]">
            <span class="text-label-normal">氩气储气罐压力 </span>
            <span class="text-[#FF9F00]">{{ Number(datas['氩气储气罐压力'].value).toFixed(2) || 0 }}{{ datas['氩气储气罐压力'].unit || '' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import imgPng from '@/assets/images/status_img.png';
import { apiMeters } from '@/http/api/controller_status';
defineProps<{ status: string }>();

let metersTimer: any = null;
const datas = ref<any>({
  'IF/BK 真空度': { value: '' },
  '雾化气压力 (BP)': {
    value: '',
  },
  内部温度: { value: '' },
  反馈功率: { value: '' },
  氩气储气罐压力: { value: 0 },
  四极杆真空度: { value: 0 },
});

const getMeters = async () => {
  try {
    const res = await apiMeters();
    if (res.data && res.data.length > 0) {
      res.data.forEach((item: any) => {
        if (item.name === 'IF/BK 真空度') {
          datas.value['IF/BK 真空度'] = item;
        }
        if (item.name === '雾化气压力 (BP)') {
          datas.value['雾化气压力 (BP)'] = item;
        }
        if (item.name === '内部温度') {
          datas.value['内部温度'] = item;
        }
        if (item.name === '反馈功率') {
          datas.value['反馈功率'] = item;
        }
        if (item.name === '氩气储气罐压力') {
          datas.value['氩气储气罐压力'] = item;
        }
        if (item.name === '四极杆真空度') {
          datas.value['四极杆真空度'] = item;
        }
      });
    }
  } catch (error) {}
};
onBeforeMount(() => {
  // metersTimer = setInterval(getMeters, 5 * 60 * 1000);
  getMeters();
});
onUnmounted(() => {
  if (metersTimer) {
    clearInterval(metersTimer);
    metersTimer = null;
  }
});

</script>
<style lang="scss" scoped></style>
